<template>
  <div id='hot_analyse'>
    <p class="data_time"
       v-if="response01"><span>数据更新时间</span><span>{{timestamp(response01.timeUnix, 'Y-M-D h:m:s')}}</span></p>
    <ul>
      <li>
        <p v-if="response01"><span>{{format_num(response01.viewsIncr)}}</span><img src='@/assets/wang/goods/up.png'
               v-if="response01.viewsRatio>0"><img v-if="response01.viewsRatio<0"
               src='@/assets/wang/goods/down.png'><img v-if="response01.viewsRatio==0"
               class="gray_img"
               src='@/assets/wang/goods/ping.png'><span
                :class="{gray:response01.viewsRatio==0,red:response01.viewsRatio>0,blue:response01.viewsRatio<0}">{{formatRate(response01.viewsRatio,1,1)}}</span>
        </p>
        <p>昨日抖音访客量</p>
      </li>
      <!-- <li>
        <p><span>{{format_num(response01.visitorIncr)}}</span><img src='@/assets/wang/goods/up.png'
               v-if="response01.visitorRatio>0"><img v-if="response01.visitorRatio<0"
               src='@/assets/wang/goods/down.png'><img v-if="response01.visitorRatio==0"
               class="gray_img"
               src='@/assets/wang/goods/ping.png'><span
                :class="{gray:response01.visitorRatio==0,red:response01.visitorRatio>0,blue:response01.visitorRatio<0}">{{formatRate(response01.visitorRatio,1,1)}}</span></p>
        <p>昨日抖音访客量</p>
      </li> -->
      <li>
        <p v-if="response01"><span>{{format_num(response01.volumeIncr)}}</span><img src='@/assets/wang/goods/up.png'
               v-if="response01.volumeRatio>0"><img v-if="response01.volumeRatio<0"
               src='@/assets/wang/goods/down.png'><img v-if="response01.volumeRatio==0"
               class="gray_img"
               src='@/assets/wang/goods/ping.png'><span
                :class="{gray:response01.volumeRatio==0,red:response01.volumeRatio>0,blue:response01.volumeRatio<0}">{{formatRate(response01.volumeRatio,1,1)}}</span></p>
        <p>昨日全网销量</p>
      </li>
      <li>
        <p><span v-if="response01">{{format_num(response01.associatedVideoCount)}}</span></p>
        <p>昨日新增关联视频</p>
      </li>
      <li>
        <p><span v-if="response01">{{format_num(response01.associatedliveCount)}}</span></p>
        <p>昨日新增关联直播</p>
      </li>
      <li>
        <p><span v-if="response01">{{format_num(response01.associatedAuthorCount)}}</span></p>
        <p>昨日新增关联达人</p>
      </li>
    </ul>
    <section class="s1 mt_50">
      <p class="title"><img src="@/assets/meng/video04_02.png"><span>商品访客量趋势</span></p>
      <section>
        <radio_group01 :radio_values="['7天', '15天','30天','90天']"
                       v-model="value01" />
        <el-date-picker v-model="value02"
                        class="ml_10 long_time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd"
                        prefix-icon="el-icon-arrow-down"
                        unlink-panels
                        :clearable="false"
                        :picker-options="pickerOptions01"
                        :default-value="[timestamp((new Date().getTime() - 2626560000) / 1000,'Y-M-D'),timestamp(new Date().getTime()/ 1000,'Y-M-D')]">
        </el-date-picker>

      </section>
      <my_line :x_data="x_data01"
               :y1_data="y1_data01"
               :y2_data="y2_data01"
               name1="增量"
               name2="总量"
               formatter="1" />
    </section>
    <!-- <section class="s1 mt_50">
      <p class="title"><img src="@/assets/meng/hot_analyse02.png"><span>抖音访客量趋势图</span></p>
      <section>
        <radio_group01 :radio_values="['7天', '15天','30天','90天']"
                       v-model="value03" />
        <el-date-picker v-model="value04"
                        class="ml_10 long_time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd"
                        prefix-icon="el-icon-arrow-down"
                        unlink-panels
                        :clearable="false"
                        :picker-options="pickerOptions"
                        :default-value="[timestamp((new Date().getTime() - 2626560000) / 1000,'Y-M-D'),timestamp(new Date().getTime()/ 1000,'Y-M-D')]">
        </el-date-picker>

      </section>
      <my_line :x_data="x_data02"
               :y1_data="y1_data02"
               :y2_data="y2_data02"
               name1="增量"
               name2="总量"
               formatter="1" />
    </section> -->
    <section class="s1 mt_50">
      <p class="title"><img src="@/assets/meng/video04_01.png"><span>全网销量趋势图</span></p>
      <section>
        <radio_group01 :radio_values="['15天','30天']"
                       v-model="value05" />

      </section>
      <my_line :x_data="x_data03"
               :y1_data="y1_data03"
               :y2_data="y2_data03"
               name1="增量"
               name2="总量"
               formatter="1" />
    </section>
    <!-- <section class="s1 mt_50">
      <p class="title"><img src="@/assets/meng/hot_analyse03.png"><span>全网销量趋势图</span></p>
      <section>
        <radio_group01 :radio_values="['15天','30天']"
                       v-model="value06" />
        </el-date-picker>

      </section>
      <my_line :x_data="x_data04"
               :y1_data="y1_data04"
               :y2_data="y2_data04"
               name1="增量"
               name2="总量"
               formatter="1" />
    </section> -->
    <section class="s1 mt_50">
      <p class="title"><img src="@/assets/meng/hot_analyse04.png"><span>热推达人趋势图</span></p>
      <section>
        <radio_group01 :radio_values="['15天','30天']"
                       v-model="value07" />

      </section>
      <my_line :x_data="x_data05"
               :y1_data="y2_data05"
               :y2_data="y1_data05"
               name1="增量"
               name2="总量"
               formatter="1" />
    </section>
    <section class="s1 mt_50">
      <p class="title"><img src="@/assets/meng/hot_video16.png"><span>关联视频趋势图</span></p>
      <section>
        <radio_group01 :radio_values="['15天','30天']"
                       v-model="value08" />

      </section>
      <my_line :x_data="x_data06"
               :y1_data="y1_data06"
               :y2_data="y2_data06"
               name1="增量"
               name2="总量"
               formatter="1" />
    </section>
    <section class="s1 mt_50">
      <p class="title"><img src="@/assets/meng/hot_analyse05.png"><span>关联直播场次趋势图</span></p>
      <section>
        <radio_group01 :radio_values="['15天','30天']"
                       v-model="value09" />

      </section>
      <my_line :x_data="x_data07"
               :y1_data="y1_data07"
               :y2_data="y2_data07"
               name1="增量"
               name2="总量"
               formatter="1" />
    </section>
    <section class="s2 mt_50">
      <p class="title"><img src="@/assets/meng/hot_analyse06.png"><span>推广达人分析</span></p>
      <section>
        <div class="width01">
          <pie :valueData="pie_data01"
               v-if="pie_data01.length!=0" />
          <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          <p>近30天视频推广达人分类</p>
        </div>
        <div class="width01">
          <pie :valueData="pie_data02"
               v-if="pie_data02.length!=0" />
          <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          <p>近30天直播推广达人分类</p>
        </div>
        <div class="width01">
          <bar :x_data="x_data08"
               :y_data="y_data08"
               formatter='2'
               v-if="x_data08.length!=0" />
          <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          <p>推广达人粉丝数分布</p>
        </div>
        <div class="width01">
          <bar :x_data="x_data09"
               :y_data="y_data09"
               formatter='2'
               v-if="x_data09.length!=0" />
          <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          <p>近30天视频点赞分布（行业分布）</p>
        </div>
        <div class="width02">
          <bar :x_data="x_data10"
               :y_data="y_data10"
               formatter='2'
               v-if="x_data10.length!=0" />
          <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          <p>近30天发布作品在24小时时间占比</p>
        </div>
      </section>

    </section>
  </div>
</template>
<script>
export default {
  name: 'hot_analyse',
  components: {},
  data() {
    return {
      response01: null,
      pickerOptions01: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 86400000
        },
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      value01: '7天',
      value02: '',
      value03: '7天',
      value04: '15天',
      value05: '15天',
      //   value06: '15天',
      value07: '15天',
      value08: '15天',
      value09: '15天',
      x_data01: [],
      y1_data01: [],
      y2_data01: [],
      x_data02: [],
      y1_data02: [],
      y2_data02: [],
      x_data03: [],
      y1_data03: [],
      y2_data03: [],
      //   x_data04: [],
      //   y1_data04: [],
      //   y2_data04: [],
      x_data05: [],
      y1_data05: [],
      y2_data05: [],
      x_data06: [],
      y1_data06: [],
      y2_data06: [],
      x_data07: [],
      y1_data07: [],
      y2_data07: [],
      pie_data01: [],
      pie_data02: [],
      x_data08: [],
      y_data08: [],
      x_data09: [],
      y_data09: [],
      x_data10: [],
      y_data10: [],
    }
  },
  props: ['id'],
  computed: {
    listen_change02() {
      const { value01, value02 } = this
      return {
        value01,
        value02,
      }
    },
    listen_change03() {
      const { value03, value04 } = this
      return {
        value03,
        value04,
      }
    },
  },
  created() {
    this.get_data01()
    // 第2部分
    this.get_data02()
    this.$watch(
      'listen_change02',
      this.debounce((newValue, oldValue) => {
        this.get_data02()
      }, 0)
    )
    this.$watch('value02', function (newValue, oldValue) {
      this.value01 = ''
    })
    // 第3部分
    this.get_data03()
    this.$watch(
      'listen_change03',
      this.debounce((newValue, oldValue) => {
        this.get_data03()
      }, 0)
    )
    this.$watch('value04', function (newValue, oldValue) {
      this.value03 = ''
    })
    // 第4部分
    this.get_data04()
    this.$watch('value05', function (newValue, oldValue) {
      this.get_data04()
    })
    // 第5部分
    this.get_data05()
    this.$watch('value07', function (newValue, oldValue) {
      this.get_data05()
    })
    // 第6部分
    this.get_data06()
    this.$watch('value08', function (newValue, oldValue) {
      this.get_data06()
    })
    // 第7部分
    this.get_data07()
    this.$watch('value09', function (newValue, oldValue) {
      this.get_data07()
    })
    // 第8部分
    this.get_data08()
    // 第9部分
    this.get_data09()
    // 第10部分
    this.get_data10()
    // 第11部分
    this.get_data11()
    // 第12部分
    this.get_data12()
  },
  methods: {
    // 第12部分
    get_data12() {
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/product/timestatistics',
        params: {
          //   proId: 588661496299,
          proId: that.id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data10 = response.data.data[1].map((element) => {
              return element + ':00'
            })
            this.y_data10 = response.data.data[0].map((element) => {
              return (element * 100).toFixed(1)
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第11部分
    get_data11() {
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/product/favoritestatistics',
        params: {
          //   proId: 588661496299,
          proId: that.id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data09 = response.data.data[0]
            this.y_data09 = response.data.data[1].map((element) => {
              return (element * 100).toFixed(1)
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第10部分
    get_data10() {
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/product/fansstatistics',
        params: {
          proId: that.id,
          //   proId: 588661496299,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data08 = [
              '<1w',
              '1-5w',
              '5-10w',
              '10-50w',
              '50-100w',
              '>100w',
            ]
            this.y_data08 = response.data.data.map((element) => {
              return (element * 100).toFixed(1)
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第9部分
    get_data09() {
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/product/liveauthorstatistics',
        params: {
          proId: that.id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.pie_data02 = response.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第8部分
    get_data08() {
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/product/authorstatistics',
        params: {
          proId: that.id,
          //   proId: 588661496299,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.pie_data01 = response.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第7部分
    get_data07() {
      let that = this
      let startDate
      let endDate
      switch (this.value09) {
        case '15天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 14, 'Y-M-D')
          break
        case '30天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D')
          break
      }
      if (this.value09 != '') {
        //   产品让少一天
        let time = new Date(endDate)
        time.setTime(time.getTime() - 24 * 60 * 60 * 1000)
        endDate = this.formatDate(time, 'yyyy-MM-dd')
        let time01 = new Date(startDate)
        time01.setTime(time01.getTime() - 24 * 60 * 60 * 1000)
        startDate = this.formatDate(time01, 'yyyy-MM-dd')
        //   产品让少一天
      }
      this.$axios({
        method: 'get',
        url: '/api/product/livetrend',
        params: {
          proId: that.id,
          //   proId: 588661496299,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data07 = response.data.data[0].dataUnix.map((element) => {
              return this.timestamp(element, 'Y年M月D日')
            })
            this.y1_data07 = response.data.data[0].trendData[1]
            this.y2_data07 = response.data.data[0].trendData[0]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第6部分
    get_data06() {
      let that = this
      let startDate
      let endDate
      switch (this.value08) {
        case '15天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 14, 'Y-M-D')
          break
        case '30天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D')
          break
      }
      if (this.value08 != '') {
        //   产品让少一天
        let time = new Date(endDate)
        time.setTime(time.getTime() - 24 * 60 * 60 * 1000)
        endDate = this.formatDate(time, 'yyyy-MM-dd')
        let time01 = new Date(startDate)
        time01.setTime(time01.getTime() - 24 * 60 * 60 * 1000)
        startDate = this.formatDate(time01, 'yyyy-MM-dd')
        //   产品让少一天
      }
      this.$axios({
        method: 'get',
        url: '/api/product/videotrend',
        params: {
          proId: that.id,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data06 = response.data.data[0].dataUnix.map((element) => {
              return this.timestamp(element, 'Y年M月D日')
            })
            this.y1_data06 = response.data.data[0].trendData[1]
            this.y2_data06 = response.data.data[0].trendData[0]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第5部分
    get_data05() {
      let that = this
      let startDate
      let endDate
      switch (this.value07) {
        case '15天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 14, 'Y-M-D')
          break
        case '30天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D')
          break
      }
      if (this.value07 != '') {
        //   产品让少一天
        let time = new Date(endDate)
        time.setTime(time.getTime() - 24 * 60 * 60 * 1000)
        endDate = this.formatDate(time, 'yyyy-MM-dd')
        let time01 = new Date(startDate)
        time01.setTime(time01.getTime() - 24 * 60 * 60 * 1000)
        startDate = this.formatDate(time01, 'yyyy-MM-dd')
        //   产品让少一天
      }
      this.$axios({
        method: 'get',
        url: '/api/product/authortrend',
        params: {
          proId: that.id,
          //   proId: 588661496299,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data05 = response.data.data[0].dataUnix.map((element) => {
              return this.timestamp(element, 'Y年M月D日')
            })
            this.y1_data05 = response.data.data[0].trendData[0]
            this.y2_data05 = response.data.data[0].trendData[1]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第4部分
    get_data04() {
      let that = this
      let startDate
      let endDate
      switch (this.value05) {
        case '15天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 14, 'Y-M-D')
          break
        case '30天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D')
          break
      }
      if (this.value05 != '') {
        //   产品让少一天
        let time = new Date(endDate)
        time.setTime(time.getTime() - 24 * 60 * 60 * 1000)
        endDate = this.formatDate(time, 'yyyy-MM-dd')
        let time01 = new Date(startDate)
        time01.setTime(time01.getTime() - 24 * 60 * 60 * 1000)
        startDate = this.formatDate(time01, 'yyyy-MM-dd')
        //   产品让少一天
      }
      this.$axios({
        method: 'get',
        url: '/api/product/volumetrend',
        params: {
          proId: that.id,
          //   proId: 588661496299,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data03 = response.data.data[0].dataUnix.map((element) => {
              return this.timestamp(element, 'Y年M月D日')
            })
            this.y1_data03 = response.data.data[0].trendData[1]
            this.y2_data03 = response.data.data[0].trendData[0]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第3部分
    get_data03() {
      let that = this
      let startDate
      let endDate
      switch (this.value03) {
        case '':
          startDate = this.value04[0]
          endDate = this.value04[1]
          break
        case '7天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D')
          break
        case '15天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 14, 'Y-M-D')
          break
        case '30天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D')
          break
        case '90天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D')
          break
      }
      if (this.value03 != '') {
        //   产品让少一天
        let time = new Date(endDate)
        time.setTime(time.getTime() - 24 * 60 * 60 * 1000)
        endDate = this.formatDate(time, 'yyyy-MM-dd')
        let time01 = new Date(startDate)
        time01.setTime(time01.getTime() - 24 * 60 * 60 * 1000)
        startDate = this.formatDate(time01, 'yyyy-MM-dd')
        //   产品让少一天
      }
      this.$axios({
        method: 'get',
        url: '/api/product/visitortrend',
        params: {
          //   proId: 588661496299,
          proId: that.id,

          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data02 = response.data.data[0].dataUnix.map((element) => {
              return this.timestamp(element, 'Y年M月D日')
            })
            this.y1_data02 = response.data.data[0].trendData[0]
            this.y2_data02 = response.data.data[0].trendData[1]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第2部分
    get_data02() {
      let that = this
      let startDate
      let endDate
      switch (this.value01) {
        case '':
          startDate = this.value02[0]
          endDate = this.value02[1]
          break
        case '7天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D')
          break
        case '15天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 14, 'Y-M-D')
          break
        case '30天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D')
          break
        case '90天':
          endDate = this.timestamp(Date.now() / 1000, 'Y-M-D')
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D')
          break
      }
      if (this.value01 != '') {
        //   产品让少一天
        let time = new Date(endDate)
        time.setTime(time.getTime() - 24 * 60 * 60 * 1000)
        endDate = this.formatDate(time, 'yyyy-MM-dd')
        let time01 = new Date(startDate)
        time01.setTime(time01.getTime() - 24 * 60 * 60 * 1000)
        startDate = this.formatDate(time01, 'yyyy-MM-dd')
        //   产品让少一天
      }
      this.$axios({
        method: 'get',
        url: '/api/product/viewtrend',
        params: {
          proId: that.id,
          //   proId: 588661496299,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data01 = response.data.data[0].dataUnix.map((element) => {
              return this.timestamp(element, 'Y年M月D日')
            })
            this.y1_data01 = response.data.data[0].trendData[0]
            this.y2_data01 = response.data.data[0].trendData[1]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 第1部分
    get_data01() {
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/product/analysis',
        params: {
          proId: that.id,
          //   proId: 588661496299,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.response01 = response.data.data
            // console.log(this.response01)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>
<style scoped lang='less'>
.s2 {
  > section {
    > div {
      > p:first-child {
        font-size: 20px;
        text-align: center;
        line-height: 300px;
        color: #222222;
      }
      > p:last-child {
        text-align: center;
        font-size: 14px;
        line-height: 30px;
        color: #222222;
      }
    }
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    #bar {
      height: 439px;
    }
    #pie {
      height: 285px;
    }
    .width01 {
      width: 50%;
    }
    .width02 {
      width: 100%;
    }
  }
}
#line {
  height: 420px;
  width: 100%;
}
.s1 {
  position: relative;
  > section {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: -3px;
  }
}
.title {
  img {
    width: 16px;
    vertical-align: -2px;
    margin-right: 9px;
  }
  span {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
}
ul {
  width: 100%;
  display: flex;
  height: 140px;
  border: dashed 1px #e5e5e5;
  align-items: center;
  box-sizing: border-box;
  li:lasr-child {
    border-right: none;
  }
  li {
    > p:nth-child(1) {
      > span:nth-child(1) {
        font-family: DINAlternate-Bold;
        font-size: 22px;
        letter-spacing: 1px;
        color: #222222;
      }
      .gray_img {
        width: 12px !important;
        height: 8px !important;
      }
      > img:nth-child(2) {
        width: 8px;
        height: 12px;
        margin-left: 8px;
        margin-right: 7px;
        vertical-align: 2px;
      }
      > span:nth-child(3) {
        font-family: DINAlternate-Bold;
        font-size: 16px;
        // color: #ea1b0b;
      }
    }
    > p:nth-child(2) {
      margin-top: 3px;
      font-size: 14px;
      color: #888888;
    }
    flex: 1;
    height: 50px;
    align-items: center;
    display: flex;
    flex-direction: column;
    border-right: dashed 1px #e5e5e5;
  }
}
.data_time {
  margin-top: 40px;
  margin-bottom: 30px;
  > span:first-child {
    font-size: 14px;
    letter-spacing: 0;
    color: #888888;
    margin-right: 9px;
  }
  > span:last-child {
    font-size: 15px;
    letter-spacing: 0;
    font-family: DINAlternate-Bold;
    color: #1779ff;
  }
}
#hot_analyse {
  padding-bottom: 50px;
}
</style>